<template>
  <div class='page-content user'>
    <div class="header">
      <div class="left-wrap">
        <el-avatar :src="state.form.headImage" class="avatar"></el-avatar>
        <!-- <img class="avatar" :src="form.headImage"/> -->
        <el-upload action="http://112.74.61.241:8081/minio/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <el-button size="small" type="primary">点击上传头像</el-button>
        </el-upload>
        <h2>{{state.date}}，{{state.form.name}}</h2>
        <p>新的一天又开始了</p>
      </div>
      <div class="right-wrap">
        <img src="@/assets/images/icon1.png" />
      </div>
    </div>

    <div class="info">
      <h1 class="title">基本设置</h1>

      <el-form :model="state.form" class="form" :rules="rules" ref="ruleFormRef" label-width="86px" label-position="top">
        <el-form-item label="昵称" prop="name">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="state.form.name" :disabled="!state.isEdit" />
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="state.form.email" :disabled="!state.isEdit" />
          </el-col>
        </el-form-item>
        <el-form-item label="手机" prop="mobilePhone">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="state.form.mobilePhone" :disabled="!state.isEdit" />
          </el-col>
        </el-form-item>
        <el-form-item label="权限等级">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="state.form.admLabel" disabled />
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <div :disabled="!state.isEdit">
            <el-radio v-model="state.form.sex" label="男">男</el-radio>
            <el-radio v-model="state.form.sex" label="女">女</el-radio>
          </div>
        </el-form-item>
        <!-- <el-form-item label="个人介绍" prop="des">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input type="textarea" rows="4" v-model="form.des" :disabled="!isEdit"/>
          </el-col>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" style="width: 90px" @click="edit">
            {{state.isEdit ? '保存' : '编辑'}}
          </el-button>
        </el-form-item>
      </el-form> 
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "user",
  meta: {
    title: "个人中心",
  },
};
</script>

<script lang="ts" setup>
import { getAdmInfo, update } from "#/User/admin";
import { reactive, ref } from "vue-demi";
import { ElMessage } from "element-plus";
import type { ElForm } from "element-plus";
const state = reactive({
  isEdit: false,
  date: "",
  form: {},
  rules: {
    name: [
      { required: true, message: "请输入昵称", trigger: "blur" },
      { min: 2, max: 50, message: "长度在 2 到 30 个字符", trigger: "blur" },
    ],
    email: [{ required: true, message: "请输入昵称", trigger: "blur" }],
    mobilePhone: [
      { required: true, message: "请输入手机号码", trigger: "blur" },
    ],
    sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
  },
  seller: {
    avatar:
      "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  },
});
const ruleFormRef = ref<InstanceType<typeof ElForm>>()
function getDate() {
  const d = new Date();
  const h = d.getHours();
  let date: string = '';

  if (h >= 6 && h < 9) {
    date = "早上好";
  } else if (h >= 9 && h < 11) {
    date = "上午好";
  } else if (h >= 11 && h < 13) {
    date = "中午好";
  } else if (h >= 13 && h < 18) {
    date = "下午好";
  } else if (h >= 18 && h < 24) {
    date = "晚上好";
  } else if (h >= 0 && h < 6) {
    date = "很晚了，早点睡";
  }

  state.date = date;
}
function getUser() {
  getAdmInfo(window.sessionStorage.getItem("userId")).then((res) => {
    // console.log(res)
    if (res.data.ret === 0) {
      state.form = res.data.admUser;
      state.form.admLabel = res.data.admUser.roleInfo.label;
      if (!state.form.headImage) {
        state.form.headImage =
          "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
      }
    } else {
      ElMessage.error("获取管理员信息错误");
    }
  });
}
function edit() {
  if (state.isEdit === true) {
    submitForm(ruleFormRef);
  } else {
    state.isEdit = !state.isEdit;
  }
}
function submitForm(formEl: InstanceType<typeof ElForm> | undefined) {
  if (!formEl) return;
  formEl.value.validate((valid) => {
    if (valid) {
      update(window.sessionStorage.getItem("userId"), state.form).then((res) => {
        if (res.data.ret === 0) {
          ElMessage.success("更新管理员信息成功！");
          state.isEdit = false;
        } else {
          ElMessage.error("更新失败！");
        }
      });
    } else {
      ElMessage.error("填写有误！");
    }
  });
}
function resetForm(formEl: InstanceType<typeof ElForm> | undefined) {
  if (!formEl) return
  formEl.resetFields()
}
function handleAvatarSuccess(res) {
  if (res.ret === 0) {
    state.form.headImage = res.url;
    submitForm(ruleFormRef);
  }
}
function beforeAvatarUpload(file) {
  const type =
    file.type === "image/jpeg" || "image/jpg" || "image/webp" || "image/png";
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!type) {
    ElMessage.error("图片格式不正确!(只能包含jpg，png，webp，JPEG)");
  }
  if (!isLt2M) {
    ElMessage.error("上传图片大小不能超过 2MB!");
  }
  return type && isLt2M;
}
getDate();
getUser();
</script>

<style lang="scss">
.user {
  .icon {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;

  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader-icon {
        font-size: 0;
        color: #fff;
        width: 90px;
        height: 90px;
        line-height: 90px;
        text-align: center;
      }
      .avatar:hover {
        font-size: 28px;
        background-color: rgba(0, 0, 0, 0.3);
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    margin-top: 15px;
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen {
  .page-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>